<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="css/video-js.min.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="./src/css/colpick.css"> -->
    <!-- <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"> -->
    <!-- <script src="https://unpkg.com/video.js/dist/video.js"></script> -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- <script src="js/jquery.danmu.js"></script> -->
    <script src="js/video.min.js"></script>

    <!-- <script src="./src/js/jquery.shCircleLoader.js"></script>
    <script src="./src/js/sco.tooltip.js"></script>
    <script src="./src/js/colpick.js"></script> -->
    <script src="./src/js/jquery.danmu.js"></script>
    <script src="./src/js/main.js"></script>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            width: 1000px;
            margin: 0 auto;
            position: relative;
        }
        
        .video-wrapper {
            position: relative;
        }
        
        .video-wrapper video {
            width: 1060px;
            height: 586px;
        }
        
        .video-wrapper canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 563px;
        }
        
        .video-wrapper .tool-box {
            height: 38px;
        }
        
        .video-wrapper input,
        .video-wrapper button {
            height: 100%;
            margin-right: 15px;
            vertical-align: middle;
            outline: none;
            border: none;
            box-sizing: border-box;
            border-radius: 5px;
        }
        
        .video-wrapper .danmu-input {
            width: 300px;
            border: 1px solid #ccc;
        }
        
        .video-wrapper .danmu-btn {
            color: #fff;
            background-color: orange;
        }
        
        #danmup {
            width: 100%;
            height: auto;
            position: absolute;
            top: 500px;
            left: 0;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="container">
        <p style="font-size: xx-large;height: 48px" id="mediaTitle">&nbsp;</p>
        <div class="video-wrapper">
            <!-- <div > -->
            <video class="video-js vjs-default-skin vjs-big-play-centered" id="myVideo" controls>
                <source id="source" type="application/x-mpegURL" src="https://test.shenxuanche.com/test_01_1080.m3u8">
            </video>
            <div> </div>
            <!-- </div> -->
        </div>
        <div id="danmup">
            <div class="text-center ctr"> <br>
                <!-- <button type="button" onclick="resumer() ">弹幕开始/继续</button> -->
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" onclick="pauser()">弹幕暂停</button> &nbsp;&nbsp;&nbsp;&nbsp; 显示弹幕:
                <input type='checkbox' checked='checked' id='ishide' value='is' onchange='changehide()'> &nbsp;&nbsp;&nbsp;&nbsp; 弹幕透明度:
                <input type="range" name="op" id="op" onchange="op()" value="100">
                <br> 发弹幕:
                <select name="color" id="color">
                    <option value="white">白色</option>
                    <option value="red">红色</option>
                    <option value="green">绿色</option>
                    <option value="blue">蓝色</option>
                    <option value="yellow">黄色</option>
                </select>
                <select name="size" id="text_size">
                    <option value="1">大文字</option>
                    <option value="0">小文字</option>
                </select>
                <select name="position" id="position">
                    <option value="0">滚动</option>
                    <option value="1">顶端</option>
                    <option value="2">底端</option>
                </select>
                <input type="textarea" id="text" max=300 />
                <button type="button" onclick="send()">发送</button>
            </div>
        </div>
    </div>
    <script>
        var myVideo = videojs('myVideo', {
            bigPlayButton: true,
            textTrackDisplay: false,
            posterImage: false,
            errorDisplay: false,
            playbackRates: [0.5, 1, 1.5, 2, 3],
        })

        myVideo.play();
        $.ajax({
                type: "get",
                url: "https://www.shenxuanche.com/json/danmaku.json",
                dataType: "json",
                success: function(json) {
                    console.log(json);
                    var damuList = json.items;
                    $.each(damuList, function(index, item) {
                        //  时间戳
                        if (item.createTime) {
                            console.log(item.createTime);
                            // new Date(item.createTime[0])
                            // var time =new Date(item.createTime[0])
                            // console.log(new Date(time));
                        }
                    })
                }
            })
            // $("#myVideo .danmu-div").danmu("addDanmu", [{
            //         "text": "这是滚动弹幕",
            //         color: "white",
            //         size: 25,
            //         time: 50
            //     }, {
            //         "text": "我是帽子绿",
            //         color: "green",
            //         size: 20,
            //         time: 85
            //     }, {
            //         "text": "哈哈哈啊哈",
            //         color: "black",
            //         size: 1,
            //         time: 62
            //     }, {
            //         "text": "这是顶部弹幕",
            //         color: "yellow",
            //         size: 10,
            //         time: 80
            //     }, {
            //         "text": "这是底部弹幕",
            //         color: "red",
            //         size: 15,
            //         time: 805
            //     }, {
            //         "text": "大家好，我是伊藤橙",
            //         color: "orange",
            //         size: 18,
            //         time: 100
            //     }

        // ])

        function addDanmaBtn(player) {
            var Dan = videojs.getComponent('Button');
            var DanButton = videojs.extend(Dan, {
                constructor: function() {
                    Dan.apply(this, arguments);
                    this.controlText("弹幕");
                },
                buildCSSClass: function() {
                    return "icon-danmaku vjs-control vjs-button";
                },
                handleClick: function() {
                    if (danmakuShow) {
                        danmaku.hide();
                        this.el_.className += ' off ';
                    } else {
                        danmaku.show();
                        this.el_.className = this.el_.className.replace(/off/, '');
                    }
                    danmakuShow = !danmakuShow;
                }
            });
            videojs.registerComponent('DanButton', DanButton);
            player.getChild('controlBar').addChild('DanButton', {}, 3);
        }
        //分辨率
        $(function() {
                var videoPanelMenu = $(".vjs-fullscreen-control");
                videoPanelMenu.before(`<div class="vjs-subs-caps-button  vjs-menu-button vjs-menu-button-popup vjs-control vjs-button"  aria-live="polite" aria-expanded="false" aria-haspopup="true">
		<div class="vjs-menu" role="presentation">
		<ul class="vjs-menu-content" role="menu">
		<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox"  onclick="changeVideo(1)">480P</li>
		<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox"  onclick="changeVideo(2)">720P </li>
		<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox"  onclick="changeVideo(3)">1080P </li>
		</ul></div>
		<button class="vjs-subs-caps-button vjs-control vjs-button" type="button" aria-live="polite" title="清晰度切换" aria-disabled="false">
				<span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">清晰度切换</span>
			</button>
		</div>`);

                var obj = {
                    tag: false,
                    ctime: 0
                };
                window.obj = obj;
                var myPlayer = videojs.getPlayers()['myVideo'];
                myPlayer.on("timeupdate", function() {
                    if (window.obj.tag) {
                        videojs("myVideo").currentTime(window.obj.ctime)
                        videojs("myVideo").play();
                        window.obj.tag = false;
                    }
                });
            })
            // (function() {
        $("#myVideo").danmu({
            // left:$("#danmuarea").offset().left,
            // top:$("#danmuarea").offset().top,
            // height: 445,
            // width: 800,
            // left: 0,
            // top: 0,
            speed: 30000,
            opacity: 1,
            font_size_small: 16,
            font_size_big: 24,
            top_botton_danmu_time: 6000
        });
        // })(jQuery);
        //发弹幕
        function send() {
            var text = document.getElementById('text').value;
            var color = document.getElementById('color').value;
            var position = document.getElementById('position').value;
            var time = $('#danmu').data("nowtime") + 5;
            var size = document.getElementById('text_size').value;
            var text_obj = '{ "text":"' + text + '","color":"' + color + '","size":"' + size + '","position":"' +
                position + '","time":' + time + '}';
            //请求后台数据
            // $.post("stone.php", {
            //     danmu: text_obj
            // });
            // var text_obj = '{ "text":"' + text + '","color":"' + color + '","size":"' + size + '","position":"' +
            //     position + '","time":' + time + ',"isnew":""}';
            var new_obj = eval('(' + text_obj + ')');
            console.log(text, color, position, time, size);
            console.log(text_obj);
            $('#danmu').danmu("add_danmu", new_obj);
            document.getElementById('text').value = '';
        }

        function op() {
            var op = document.getElementById('op').value;
            $('#danmu').data("opacity", op);
        }


        function changehide() {
            var op = document.getElementById('op').value;
            op = op / 100;
            if (document.getElementById("ishide").checked) {
                jQuery('#danmu').data("opacity", op);
                jQuery(".flying").css({
                    "opacity": op
                });
            } else {
                jQuery('#danmu').data("opacity", 0);
                jQuery(".flying").css({
                    "opacity": 0
                });
            }
        }


        function settime() {
            var t = document.getElementById("set_time").value;
            t = parseInt(t)
            console.log(t)
            $('#danmu').data("nowtime", t);
        }
        // 切换清晰度
        function changeVideo(type) {
            if (type == 1) {
                videojs("myVideo").src(
                    "https://test.shenxuanche.com/test_01_480.m3u8");
                videojs("myVideo").type("application / x - mpegURL")
                videojs("myVideo").play();


            }
            if (type == 2) {
                videojs("myVideo").src(
                    "https://test.shenxuanche.com/test_01_720.m3u8");
                videojs("myVideo").type("application / x - mpegURL")
                videojs("myVideo").play();

            }
            if (type == 3) {
                videojs("myVideo").src(
                    "https://test.shenxuanche.com/test_01_1080.m3u8");
                videojs("myVideo").type("application / x - mpegURL")
                videojs("myVideo").play();
            }
            window.obj.tag = true;
        }
    </script>
</body>

</html>